<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="300"
      >
        <!--  <van-cell v-for="item in list" :key="item" :title="item" /> -->

        <div class="mui-content">
          <p class="todays-bill">{{this.$route.params.title}}</p>
          <ul class="mui-table-view mui-grid-view">
            <li
              class="mui-table-view-cell mui-media mui-col-xs-6"
              v-for="item in todaybillList"
              :key="item.index"
            >
              <router-link :to="'/playsongs/' + item.song_id" class="myTitle">
                <img class="mui-media-object" :src="item.pic_big" style="width:130px" />
                <div class="mui-media-body" style="font-size:13px;color:#999">{{item.album_title}}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 没数据时显示 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      todaybillList: [],
      loading: false, //是否在触底加载
      finished: false, //是否还有歌曲
      refreshing: false ,//是否在下拉刷新
      //offset:300,//滚动条与底部距离小于offset是触发load事件
      pageSize:12,//每页条数
      page:1,//页码
      total:0,
    };
  },
  props: {
    title: String,
    type: String,
    size: String
  },
  created() {
    this.getTodayBill();
  },
  methods: {

    getTodayBill() {
      const todaybillURL = 
        this.HOST + 
        `/v1/restserver/ting?method=baidu.ting.billboard.billList&offset=${this.offset}&type=` +
        this.$route.params.type;
      this.$axios
        .get(todaybillURL)
        .then(res => {
          //console.log(res.data);
          this.todaybillList = res.data.song_list;
          
    

        })
        .catch();
    },

   

  //触底加载
  onLoad() {
    setTimeout(() => {
      if (this.refreshing) { //如果是false
        this.todaybillList = [];
        this.refreshing = false;
      }

      for (let i = 0; i < 12; i++) {
        this.todaybillList.push(this.todaybillList.length + 1);
      }
      this.loading = false;

      if (this.todaybillList.length >= 40) {
        this.finished = true;
      }
    }, 1000);
  },

    //下拉刷新
  onRefresh() {
    setTimeout(() => {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      //this.loading = true;
      this.refreshing = false;
      //this.onLoad();
      //this.todaybillList = [];
    }, 500);
  }
  },

  

  
};
</script>
<style lang="" scoped>
.myBox {
  width: 33%;
}
.myTitle {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.mui-card {
  margin: 0;
}
.mui-card-header span:nth-of-type(1) {
  font-size: 20px;
  font-weight: 700;
}
.todays-bill {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin-top: 10px;
  text-align: left;
  padding-left: 5px;
  margin-bottom: 10px;
}
.mui-table-view.mui-grid-view {
  padding: 0;
}
</style>